<template>
    <!-- img必须设置不允许拖动，draggable属性，否则触发画布的onDrop事件   -->
    <div
      class="my-container"
      :style="{
        width: detail.position.w-4 + 'px',
        height: detail.position.h-4 + 'px',
    }"
    >
      <q-img
        :src="param.imgURL"
        :style="{
          'width': detail.position.w-4 + 'px',
          'height': detail.position.h-4 + 'px'
        }"
      >
        <div class="absolute-top text-center">
          {{param.title}}
        </div>
      </q-img>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, onMounted, PropType, ref, toRefs, watch } from 'vue';
  import { CGraphEntity, CVariableDataItem } from 'stores/editorModels';
  import { CRecyclingWaterTankPropertyItem } from './RecyclingWaterTankViewModel'
  import { useMessageNotify } from 'src/hook/common/useMessageNotify';
  
  
  export default defineComponent({
    name: 'ViewRecyclingWaterTank',
    props: {
      detail: {
        type: Object as PropType<CGraphEntity>,
        required: true
      },
      dynamicData: {
        type: Array as PropType<CVariableDataItem[]>,
        default: () => {
          return [] as CVariableDataItem[]
        }
      }
    },
  
    setup (props) {
      //数据解构
      const {
        detail
      } = toRefs(props);
  
      //错误通知
      const {
        showMessage
      } = useMessageNotify();
  
      //响应数据
      let param = ref<CRecyclingWaterTankPropertyItem>({
        title: '',
        imgURL: '',
        dayOutWater: 0
      });
  
  
      //初始化
      const init = () => {
        param.value.title = detail.value.comLabel;
        param.value.imgURL = detail.value.graphUrl;
        //个性化属性
        if ((detail.value) && (detail.value?.propsItem) &&
          (detail.value?.propsItem.length > 0)) {          
          //param.value.dayOutWater = parseFloat(detail.value.propsItem[0].value)
        } else {
          //showMessage('Image 属性不符！');
        }
      };
  
      // 监视数据变化,detail每个属性变化都能监听到
      watch(() => detail, () => {
        //发生变化时更新数据
        init();
      }, { deep: true });
  
      // 挂载组件
      onMounted(() => {
        init();
      });
  
      return {
        detail,
        param
      };
    }
  });
  </script>
  
  <style lang="scss" scoped>
  .my-container {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 10px;
    bottom: 10px;
    text-align: left;
  }
  </style>
  